<template>
  <div>
    <div>
      {{obj}}
      <el-cascader-panel
        v-model="obj.pca"
        :options="pca"
        :props="{ label: 'name',value:'name'}"
        @change="findData"
      ></el-cascader-panel>
      <!-- {{pca}} -->
    </div>

    <div style="margin-top:10px;">
      <div style="width:50% ;float:left  ">
        <el-form :model="obj" ref="form" :rules="rules" class="demo-ruleForm" label-width="80px">
          <!-- <el-form-item label="国家" prop="name">
            <el-input v-model="obj.country"></el-input>
          </el-form-item>
          <el-form-item label="省份" prop="name">
            <el-input v-model="obj.province"></el-input>
          </el-form-item>
          <el-form-item label="市" prop="city">
            <el-input v-model="obj.city	"></el-input>
          </el-form-item>
          <el-form-item label="区" prop="name">
            <el-input v-model="obj.area"></el-input>
          </el-form-item>-->
        <el-form-item label="确诊" prop='confirmed'>
            <el-input v-model.number="obj.confirmed"></el-input>
          </el-form-item>
          <el-form-item label="疑似" prop='suspected'>
            <el-input v-model.number="obj.suspected"></el-input>
          </el-form-item>
          <el-form-item label="死亡" prop='dead'>
            <el-input v-model.number="obj.dead"></el-input>
          </el-form-item>
          <el-form-item label="治愈" prop='cure'>
            <el-input v-model.number="obj.cure"></el-input>
          </el-form-item>
          <el-form-item label="重症" prop='severe'>
            <el-input v-model.number="obj.severe"></el-input>
          </el-form-item>
          <el-form-item label="境外输入" prop='outside'>
            <el-input v-model.number="obj.outside"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button @click="save">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="width:50%; float:right ;color:red;font-weight:800;padding-left:20px">
        <div>温馨提示</div>
        <div>1.先选择城市</div>
        <div>2.再填写数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import pca from "../../assets/404_images/pca.json";
import { mapActions, mapState } from "vuex";
import moment from "moment";
//mapAction获取方法
//mapState获取属性值
export default {
  data() {
    return {
       rules:{
        confirmed:[
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入数字值'}
        ],
        suspected:[
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入数字值'}
        ],
        dead:[
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入数字值'}
        ],
        cure:[
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入数字值'}
        ],
        severe:[
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入数字值'}
        ],
        outside:[
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入数字值'}
        ]
      },
      pca,
      obj: {
        country: "中国"
      }
    };
  },
  computed: {
    //文件名+数据名
    ...mapState("dataupdata", ["datalist"])
  },
  methods: {
    //文件名+方法名
    ...mapActions("dataupdata", ["saveQrupdate", "page_query"]),
    //查询当天是否录入数据
    findData(val) {
      //地区
      // console.log(val[2]);
      // console.log(moment(new Date()).format('YYYY-MM-DD'));

      let params = {
        page: 1,
        pageSize: 1,
        area: val[2],
        inputTime: moment(new Date()).format("YYYY-MM-DD")
      };
      this.page_query(params).then(res => {
        // console.log(res);undefined
        // console.log(this.datalist);
        if (this.datalist.total > 0) {
          //修改
          // console.log(this.datalist.list[0]);
          this.obj = this.datalist.list[0];
        }
      });
    },
    //s数据上报
    save() {
      if (this.obj.pca) {
        this.obj.province = this.obj.pca[0];
        this.obj.city = this.obj.pca[1];
        this.obj.area = this.obj.pca[2];
        delete this.obj.pca;
      }

      //   console.log(this.obj);

      //   console.log(this.obj);
      this.saveQrupdate(this.obj).then(res => {
        //将res放入提示框
        console.log(res);

        this.$router.push({
          path: "/datalist/table"
        });
      });
    }
  }
};
</script>
